<template>
	<div class="orderf">
		<div class="s">
			<div class="head">
				<span>{{shop.name}}</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
			</div>
		</div>
		<div class="z">
			<div>
				<Dropdown trigger="click" class="el">
					<Button type="primary" v-model="types" @click="type">
						全部菜品
						<Icon type="ios-arrow-down"></Icon>
					</Button>
					<DropdownMenu slot="list">
						<DropdownItem v-model="types">
							<button @click="type1">凉菜</button>
						</DropdownItem>
						<DropdownItem v-model="types">
							<button @click="type2">烧菜</button>
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
				<Dropdown class="el" trigger="click">
					<Button type="primary" v-model="address" @click="addres">
						折扣
						<Icon type="ios-arrow-down"></Icon>
					</Button>
					<DropdownMenu slot="list">
						<DropdownItem v-model="address">
							<button @click="addres1">折扣素菜</button>
						</DropdownItem>
						<DropdownItem v-model="address">
							<button @click="addres2">折扣荤菜</button>
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
				<Dropdown class="el" trigger="click">
					<Button type="primary" v-model="times" @click="time">
						热销
						<Icon type="ios-arrow-down"></Icon>
					</Button>
					<DropdownMenu slot="list">
						<DropdownItem v-model="times">
							<button @click="time1">畅销菜品</button>
						</DropdownItem>
						<DropdownItem v-model="times">
							<button @click="time2">火热小吃</button>
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</div>
			<div class="search">
				<Input v-model="search">
					<Button slot="append">
						<Icon type="ios-search" size="20"/>
					</Button>
				</Input>
			</div>
		</div>
		<div class="li">
			<div class="xiang" v-for="shop in dis">
				<div class="left">
					<img src="" alt="">
				</div>
				<div class="right">
					<div class="one">
						<div class="top">菜名：{{shop.commodity_name}}</div>
						<div class="bood">价格：{{shop.price}}元</div>
					</div>
					<div class="two">
						<button @click="oder(shop.commodity_name,shop.price,shop.id,shop.shop_id)">
							点餐
						</button>
						<button>
							取消
						</button>
					</div>

				</div>
			</div>
			<div class="foot" v-if="food">
				<p>
					<button @click="modal1 = true">已选菜品{{arr.length}}种</button>
				</p>
				<button @click="play(number)">确定</button>
				<button>取消</button>
			</div>
			<Modal v-model="modal1" title="已选菜品">
				<table class="tone" border="1px solid black" width="100%"
					   style="border-collapse: collapse;text-align: center ">
					<tr>
						<th>菜名</th>
						<th>价格</th>
						<th>个数</th>
						<th>总价</th>
						<th>操作</th>
					</tr>
					<tr v-for="(obj,index) in order_food.info">
						<td>{{obj.commodity_name}}</td>
						<td>{{obj.price}}</td>
						<td>
							<button @click="jia(index,true)" style="border:0px; font-size: 15px;width: 20px">+</button>
							<span style="margin-right:20px;margin-left:20px "> {{obj.number}}</span>
							<button @click="jian(index)" style="border:0px;font-size: 15px;width: 20px">-</button>
						</td>
						<td>{{obj.price*obj.number}}</td>
						<td>
							<button @click="detele(index)" style="border:0px">删除</button>
						</td>
					</tr>
					<tr>
						<td>合计</td>
						<td></td>
						<td></td>
						<td>{{number}}</td>
						<td></td>
					</tr>
				</table>
			</Modal>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'

	export default {
		name: "Discount",
		data() {
			return {
				sor: [],
				search: '',
				types: '',
				address: '',
				times: '',
				dis: {},
				diss: {},
				shop: {},
				food: false,
				count: 0,
				order_food: {
					shop_name:'',
					shop_id:'',
					user_id:'',
					user_name:'',
					prices:'',
				},
				info:{},
				arr: [],
				num: {},
				modal1: false,
				data1: 0,
				cais: false,
			}
		},
		async mounted() {
			var users = JSON.parse(localStorage.users)
			this.routeId = this.$route.params.id
			let discount = await axios.post('/reception/Assembly/info', {id: this.$route.params.id}).then(r => r.data)
			this.shop = discount.shop_info[0]
			this.dis = discount.commodity_info
			console.log(this.dis)
			this.diss = discount.shop_info
		},
		computed: {
			number() {
				if (this.cais) {
					this.cais = false
					var a = 0
					for (let i = 1; i <= this.arr.length; i++) {
						a += (this.order_food.info[i].price * this.order_food.info[i].number)
					}

					this.data1 = a
					console.log(this.data1)
					return this.data1
				}
			}
			// searchList() {
			// 	if (this.types != "") {
			// 		var l = this.sor.filter(b => b.type.includes(this.types))
			// 		return l
			// 	}
			// 	if (this.address != "") {
			// 		var g = this.sor.filter(b => b.address.includes(this.address))
			// 		return g
			// 	}
			// 	if (this.times != "") {
			// 		var g = this.sor.filter(b => b.times.includes(this.times))
			// 		return g
			// 	}
			// 	if (this.search != null) {
			// 		var m = this.sor.filter(b => b.name.includes(this.search))
			// 		return m
			// 	}
		},
		watch: {},
		methods: {
			type1() {
				this.types = '快捷简餐'
			},
			addres() {
				this.address = ''
			},
			addres1() {
				this.address = '上西街商区'
			},
			addres2() {
				this.address = '下东街商区'
			},
			type2() {
				this.types = '高档餐厅'
			},
			type() {
				this.types = ''
			},
			time() {
				this.types = ''
			},
			time1() {
				this.types = '新开店铺'
			},
			time2() {
				this.types = '经典老铺'
			},
			go() {
				return this.$router.push('/users/index')
			},
			oder(name, id, count, shoop) {
				this.food = true
				var users = JSON.parse(localStorage.users)
				let cou =count
				this.info[cou]={
					commodity_id : count,
					commodity_name : name,
					price : id,
					number : this.count,
				}
				this.order_food.info= this.info
				this.order_food.shop_name=this.shop.name,
				this.order_food.shop_id=shoop,
				this.order_food.user_id=users.id,
				this.order_food.user_name=users.name,
				this.order_food.prices=this.data1
				this.arr = Object.keys(this.order_food.info)
			},
			oder_not(id) {
				// this.count=ture
				// this.order_food[id].number++
				// console.log( this.count)
			},
			jia(id) {
				this.order_food.info[id].number += 1
				this.$forceUpdate(this.order_food.info[id].number)
				this.cais = true
			},
			jian(id) {
				if (this.order_food.info[id].number > 0) {
					this.order_food.info[id].number -= 1
					this.$forceUpdate(this.order_food.info[id].number)
					this.cais = true
				}
				if (this.order_food.info[id].number <= 0) {
					return this.$Message.info('该商品数量已为0')
					this.cais = true
				}
			},
			detele(id) {
				delete this.order_food.info[id]
				this.arr = Object.keys(this.order_food.info)
				this.$forceUpdate(this.order_food.info)
				this.cais = true
				return this.$Message.info('已删除订单中该商品')
			},
			async play() {
				for (let i = 1; i <= this.arr.length; i++) {
					this.order_food.info[i].prices = this.data1
					this.order_food.prices = this.data1
				}
				if (this.data1 != 0) {
					let doit = await axios.post('/reception/Assembly/orders_add',this.order_food ).then(r => r.data)
					return this.$Message.info(doit.msg)
				} else {
					return this.$Message.info('无商品')
				}
			},
		}
	}
</script>
<style lang="less">
	.orderf {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.s {
			width: 100%;
			background-color: white;

			.headrs {
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 230px;
				background-position: 70%;
			}
		}

		.ivu-select-dropdown {
			background-color: #FE7676;
		}

		.el {
			margin-left: 5%;
			width: 27%;
			text-align: center;

			button {
				border: 0px;
				color: white;
				background-color: rgba(0, 0, 0, 0);
			}
		}

		.ivu-dropdown-rel {
			margin-top: 10px;
			background-color: #FE7676;
			border-radius: 8px;
		}

		.ivu-btn-primary {
			height: 33px;
			background-color: #FE7676;
			border: #FE7676;
		}

		.ivu-input-group-append {
			border: 0px;
		}

		.ivu-input {
			height: 25px;
		}

		.ivu-avatar {
			height: 44px;
			width: 50px;
		}

		.ivu-list-item-meta-avatar {
			margin-left: 16px;
		}

		.ivu-list-item-action > li:after {
			content: none;
		}

		.ivu-list-item-action {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.li {
			width: 100%;
			height: 532px;
			background-color: #B0C1D3;
			overflow: auto;

			.xiang {
				height: 115px;
				width: 100%;
				position: relative;

				.left {
					position: absolute;
					left: 2%;
					top: 8%;
					width: 30%;
					height: 92%;
					background-color: white;
					padding: 2%;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					position: absolute;
					right: 2%;
					top: 8%;
					width: 64%;
					height: 92%;
					background-color: white;
					line-height: 1;
					border: 0px;
					padding: 2%;
					text-align: center;

					.top {
						height: 25%;
						line-height: 1;
						font-weight: bold;
					}

					.one {
						width: 100%;
						height: 80%;
						float: left;
						text-align: center;

						p {
							color: white;
							font-size: 15px;
						}
					}

					.two {
						height: 20%;
						width: 100%;
						text-align: center;
						background-color: rgba(0, 0, 0, 0);

						button {
							width: 30%;
							height: 100%;
							background-color: #F37473;
							border: 0px;
							color: white;
							font-weight: bold;
							border-radius: 5px;
							margin-left: 10px;
						}
					}

					.bood {
						height: 55%;
						line-height: 1;
					}


				}
			}
		}

		.ivu-list-items {
			min-height: 100px
		}

		.ivu-list-item {
			padding: 0;
			border: 0px;

			img {
				height: 44px;
				width: 44px;
			}
		}

		.z {
			width: 100%;
			height: 100px;

			.search {
				margin: 10px 4%;
				width: 92%;
				height: 30px;
				background-color: #FA4242;
				padding: 1px 2%;

				input {
					border-radius: 0px;
				}

				button {
					background-color: #FA4242;
					border-radius: 0px;
					color: white;
					height: 25px;
					padding-top: 0;
				}
			}

		}

		.z > .head {
			padding: 0;
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #9BB1C8;
			font-size: 22px;
			text-align: center;
			padding-right: 10px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #9BB1C8;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #9BB1C8;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}

		.foot {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: right;
			height: 10%;

			p {
				color: white;
				font-size: 15px;
				height: 40%;
				text-align: left;

				button {
					width: 50%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0);
				}
			}

			button {
				height: 40%;
				width: 19%;
				border: 0;
				text-align: center;
				margin-right: 10px;
				margin-top: 5px;
				color: white;
				font-weight: bold;
				font-size: 15px;
				background-color: #F37473;
				border-radius: 5px;
			}
		}
	}

</style>